<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>菜单管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../lib/layer/theme/default/layer.css">
		<link rel="stylesheet" href="../../static/css/skins.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<script type="text/javascript" src="../../static/js/axios.min.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.el-cascader-menu__wrap {
				min-height: 350px
			}
			.el-icon-search{
				color: #409EFF;
			}
			.el-icon-refresh-right{
				color: #409EFF;
			}
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body class="skin-blue skin-del">
		<el-container id="app" v-cloak>
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 35px;" @submit.native.prevent>
					<el-form-item label="菜单名称">
						<el-input v-model="queryData.keyword" placeholder="请输入关键字"></el-input>
					</el-form-item>
					<el-form-item>
					    <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
					    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
					</el-form-item>
				</el-form>
				<vxe-grid border ref="xTree" resizable show-overflow highlight-current-row="true" keep-source
					@page-change="handlePageChange" :height="tableHeight" size="mini" row-id="menuCode"
					:checkbox-config="tableRadio" :toolbar="tableToolbar" :pager-config="tablePage"
					:loading="dataLoading" @cell-dblclick="cellDBLClickEvent"
					:edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
					@toolbar-button-click="toolbarButtonClickEvent" :data="tableData" :sort-config="{remot:true}"
					@sort-change="tableSortChange">
					<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
					<vxe-table-column field="menuId" title="菜单编码" width="100" align="right" sortable='custom'>
					</vxe-table-column>
					<vxe-table-column field="menuName" title="菜单名称" width="200" align="left">
					</vxe-table-column>
					<vxe-table-column field="parentMenuName" title="父级菜单" width="200" align="left">
					</vxe-table-column>
					<vxe-table-column field="iconPath" title="菜单图标" width="80" align="center" type="html"
						:formatter="formatIcon"></vxe-table-column>
					<vxe-table-column field="menuPath" title="菜单地址" align="left">
					</vxe-table-column>
					<vxe-table-column field="menuLx" title="菜单类型" width="100" align="left">
						<template v-slot="{ row }">
							{{formatterMenuType(row.menuLx)}}
						</template>
					</vxe-table-column>
					<vxe-table-column field="menuDsc" title="备注" width="140" align="left">
					</vxe-table-column>
					<vxe-table-column field="orderId" title="排序号" width="80" align="right">
					</vxe-table-column>
					<vxe-table-column field="createUser" title="创建人" width="130" align="left">
					</vxe-table-column>
					<vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate" sortable>
					</vxe-table-column>
					<vxe-table-column field="id" title="菜单ID" width="180" align="right" :visible="visible">
					</vxe-table-column>
				</vxe-grid>

				<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
					:loading="submitLoading" resize destroy-on-close>
					<el-form :model="formData" :rules="formRules" ref="formData" label-width="80px"
						label-position="right" size="mini">
						<template v-if="visible===true">
							<el-form-item label="菜单ID" prop="menuId">
								<el-input v-model="formData.menuId"></el-input>
							</el-form-item>
						</template>
						<el-row>
							<el-col span="12">
								<el-form-item label="菜单类型" prop="menuLx">
									<el-select v-model="formData.menuLx" clearable placeholder="请选择菜单类型"
										style="width:100%">
										<el-option v-for="item in menuTypeOptions" :key="item.value" :label="item.label"
											:value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col span="12">
								<el-form-item label="排序号" prop="orderId">
									<el-input-number v-model="formData.orderId" step="5" placeholder="请输入排序号"
										style="width:100%"></el-input-number>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col span="12">
								<el-form-item label="父级菜单" prop="parentMenuId">
									<el-cascader v-model="formData.parentMenuId" :options="menuOptions"
										:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }"
										clearable filterable style="width:100%">
									</el-cascader>
								</el-form-item>
							</el-col>
						</el-row>

						<el-form-item label="菜单名称" prop="menuName">
							<el-input type="text" v-model="formData.menuName" placeholder="请输入菜单名称" maxlength="100"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="菜单图标" prop="iconPath">
							<el-input type="text" v-model="formData.iconPath" placeholder="请选择菜单图标" maxlength="32">
								<el-button slot="prepend" :icon="formData.iconPath"></el-button>
								<el-button slot="append" icon="el-icon-search" @click="selectMenuIcon" v-cloak>选择
								</el-button>
							</el-input>
						</el-form-item>
						<el-form-item label="菜单地址" prop="menuPath">
							<el-input type="text" v-model="formData.menuPath" placeholder="请输入菜单地址" maxlength="200"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="报表路径"
							v-show="formData.menuLx=='3'||formData.menuLx=='4'||formData.menuLx=='树形报表'||formData.menuLx=='帆软报表'">
							<el-input type="text" v-model="formData.reportPath" placeholder="请输入菜单名称" maxlength="1000"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="数据源"
							v-show="formData.menuLx=='3'||formData.menuLx=='4'||formData.menuLx=='树形报表'||formData.menuLx=='帆软报表'">
							<el-input type="text" v-model="formData.dataSource" placeholder="请输入菜单名称" maxlength="500"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="备注" prop="menuDsc">
							<el-input type="textarea" v-model="formData.menuDsc" :autosize="{ minRows: 2, maxRows: 4}"
								placeholder="请输入备注" maxlength="200" show-word-limit></el-input>
						</el-form-item>
						<el-form-item style="height:auto;padding:4px 20px;text-align: right;">
							<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
								:disabled="disabled" v-cloak>保存</el-button>
							<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')"
								v-cloak>
								重置
							</el-button>
							<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
								v-cloak>
								退出
							</el-button>
						</el-form-item>
					</el-form>
				</vxe-modal>
			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		var vue = null;
		window.onload = function() {
			var main = {
				data() {
					return {
						selectRow: [],
						isEdit: false,
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 30,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: [
								'Sizes',
								'PrevJump',
								'PrevPage',
								'Number',
								'NextPage',
								'NextJump',
								'FullJump'
							]
						},
						dataLoading: false,
						loading: false,
						disabled: false,
						visible: false,
						tableHeight: '100%',
						tableData: [],
						menuTypeOptions: [{
							value: 1,
							label: '功能菜单'
						}, {
							value: 2,
							label: '父级菜单'
						}, {
							value: 3,
							label: '树形报表'
						}, {
							value: 4,
							label: '帆软报表'
						}],
						menuOptions: [],
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [],
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						submitLoading: false,
						selectRow: null,
						showEdit: false,
						queryData: {
							keyword: ""
						},
						formData: {
							menuId: "",
							menuName: "",
							parentMenuId: "",
							iconPath: "",
							menuPath: "",
							menuLx: "",
							menuDsc: "",
							orderId: "",
							reportPath: "",
							dataSource: ""
						},
						formRules: {
							menuName: [{
									required: true,
									message: '请输入菜单名称'
								},
								{
									min: 1,
									max: 200,
									message: '长度在1到200个字符'
								}
							],
							menuLx: [{
								required: true,
								message: '请选择菜单类型'
							}],
							orderId: [{
								required: true,
								message: '请输入序号'
							}],
							parentMenuId: [{
								required: true,
								message: '请选择节点'
							}]
						},
						//排序
						prop: '',
						order: ''
					}
				},
				created() {
					this.findList();
					this.getButton();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xTree.$el.offsetTop - 5;
				},
				methods: {
					searchEvent() {
							this.findList();
					},
					searchEventA() {
							this.queryData.keyword = "";
							this.findList();
					},
					//点击选中
					cellClickEvent({
						row,
						column,
						triggerRadio
					}) {
						console.log(row, column, triggerRadio)
					},
					getTreeData(data) {
						for (let i = 0; i < data.length; i++) {
							if (data[i].children.length < 1) {
								// children若为空数组，则将children设为undefined
								data[i].children = undefined;
							} else {
								// children若不为空数组，则继续 递归调用 本方法
								this.getTreeData(data[i].children);
							}
						}
						return data;
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					findList() {
						let queryParams = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
							keyword: this.queryData.keyword,
							//order为排序的方式，prop为排序的列
							order:this.order,
							prop:this.prop,
						});
						this.dataLoading = true;
						var object = this;
						webApi("/menu/getMenuTreeGrid", "post", queryParams, function(data) {
							object.tableData = data.data.rows;
							object.tablePage.total = data.data.total
							object.dataLoading = false;
							object.getMenuOptions();
						}, function(data) {
							object.tableData = [];
							object.tablePage.total = 0
							object.dataLoading = false;
						});
					},
					getButton() {
						this.tableToolbar.buttons = []
						let bts = Tool.getButton()
						let btns = []
						this.tableToolbar.buttons = btns.concat(bts)
					},
					getMenuOptions() {
						var signInputParms = {}
						var object = this;
						webApi("/menu/getMenuOptions", "post", signInputParms, function(data) {
							object.menuOptions = object.getTreeData(data.data);
						}, function(data) {});
					},
					searchEvent(formName, acType) {
						this.tablePage.currentPage = 1
						if (acType == 0) {
							this.queryData = {
								keyword: ""
							}
						}
						this.findList();
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
					},
					formatIcon({
						cellValue
					}) {
						return `<i class="${cellValue} fa-lg"></i>`;
					},
					formatterMenuType(cellValue) {
						let i = this.menuTypeOptions.findIndex((item) => item.value == cellValue)
						return this.menuTypeOptions[i].label ? this.menuTypeOptions[i].label : '';
					},
					labelToId(name) {
						let i = this.menuTypeOptions.findIndex((item) => item.label == name)
						return this.menuTypeOptions[i].value ? this.menuTypeOptions[i].value : '';
					},
					selectMenuIcon() {
						layer.open({
							type: 2,
							area: ['900px', '720px'], //宽高
							fixed: false, //不固定
							title: '选择菜单图标',
							maxmin: true,
							shadeClose: true,
							btnAlign: 'r',
							content: "../utl/select-icon.html"
						});
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'reset':
								this.searchEvent(this.queryData, 0)
								break;
							case 'search':
								this.searchEvent(this.queryData, 1)
								break;
							case 'btnInsert':
								var row = this.$refs.xTree.getCheckboxRecords();
								if (row) {
									var parentCode = row.parentMenuId;
								} else {
									var parentCode = "";
								}
								this.insertEvent(parentCode);
								break;
							case 'btnUpdate':
								if (this.$refs.xTree.getCheckboxRecords().length == 1) {
									let row = this.$refs.xTree.getCheckboxRecords()
									this.editEvent(row[0]);
								} else if (this.$refs.xTree.getCheckboxRecords().length > 1) {
									this.$message({
										message: "数据大于一条，无法修改",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnDelete':
								var row = this.$refs.xTree.getCheckboxRecords();
								console.log(row)
								if (row.length > 0) {
									this.removeEvent(row);
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnExport':
								this.$refs.xTree.exportData({
									filename: '菜单列表',
									sheetName: 'Sheet1',
									type: 'xlsx'
								});
								break;
						}
					},
					insertEvent(parentCode) {
						this.isEdit = false
						this.formData = {
							menuId: "",
							orderId: "",
							menuId: "",
							menuName: "",
							parentMenuId: parentCode == null ? "-1" : parentCode,
							iconPath: "",
							menuPath: "",
							menuLx: 1,
							menuDsc: "",
							reportPath: "",
							dataSource: ""
						};
						this.selectRow = null;
						this.showEdit = true;
					},
					submitEvent(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.submitLoading = true;
								this.disabled = true;
								let params = Object.assign(this.formData);
								var object = this;
								if (this.isEdit) {
									console.log(typeof this.formData.menuLx, this.formData.menuLx)
									this.formData.menuLx = typeof this.formData.menuLx == 'string' ? this
										.labelToId(this.formData
											.menuLx) : this.formData.menuLx
									webApi("/menu/save", "post", params, function(data) {
										if (data.code == 200) {
											object.findList();
											object.$message({
												message: data.msg,
												type: 'success',
												center: true
											});
											object.showEdit = false;
										} else {
											object.$message({
												message: data.msg,
												type: 'error',
												center: true
											});
										}
										object.disabled = false;
									}, function(data) {
										object.disabled = false;
									});
								} else {
									webApi("/menu/save", "post", params, function(data) {
										if (data.code == 200) {
											object.findList();
											object.$message({
												message: data.msg,
												type: 'success',
												center: true
											});
											object.showEdit = false;
										} else {
											object.$message({
												message: data.msg,
												type: 'error',
												center: true
											});
										}
										object.disabled = false;
									}, function(data) {
										object.disabled = false;
									});
								}
								this.$refs.xTree.setAllTreeExpansion(true);
								this.submitLoading = false;
							} else {
								return false;
							}
						});
					},
					resetEvent(formName) {
						this.formData = {
							menuId: "",
							orderId: "",
							menuName: "",
							parentMenuId: "",
							iconPath: "",
							menuPath: "",
							menuLx: 1,
							menuDsc: "",
							reportPath: "",
							dataSource: ""
						};
						this.selectRow = null;
					},
					closeEvent(formName) {
						this.showEdit = false;
					},
					editEvent(row) {
						this.isEdit = true
						console.info(row);
						this.formData = {
							menuId: row.menuId == null ? "" : row.menuId,
							orderId: row.orderId,
							menuName: row.menuName,
							parentMenuId: row.parentMenuId == null ? "" : row.parentMenuId,
							iconPath: row.iconPath == null ? "" : row.iconPath,
							menuPath: row.menuPath == null ? "" : row.menuPath,
							menuLx: this.formatterMenuType(row.menuLx),
							menuDsc: row.menuDsc == null ? "" : row.menuDsc,
							reportPath: row.reportPath == null ? "" : row.reportPath,
							dataSource: row.dataSource == null ? "" : row.dataSource
						};
						console.log(this.formData)
						this.selectRow = row;
						this.showEdit = true;
					},
					removeEvent(row) {
						console.log(row)
						this.$XModal.confirm('您确定要删除这条数据?(删除后所有用户无法再次访问该菜单)').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let ids = ""
								row.forEach(item => {
									ids += item.menuId + ","
								});
								let params = Object.assign({
									menuId: ids
								});
								console.log(params)
								var object = this;
								webApi("/menu/delete", "post", params, function(data) {
									if (data.code == 200) {
										object.findList();
										object.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										object.showEdit = false;
									} else {
										object.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
								}, function(data) {});
								this.submitLoading = false;
							}
						});
					},
					statusEvent(row, status) {
						var msg = status == 1 ? '您确定要启用该数据？' : '您确定要停用该数据？';
						this.$XModal.confirm(msg).then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = Object.assign({
									id: row.id,
									status: status
								});
								XEAjax.post(`${curl}/menu/setStatus`, params).then(data => {
									if (data.code == 200) {
										this.findList();
										this.$message({
											message: data.msg,
											type: 'success',
											center: true,
											center: true
										});
										this.showEdit = false;
									} else {
										this.$message({
											message: data.msg,
											type: 'error',
											center: true,
											center: true
										});
									}
								});
								this.submitLoading = false;
							}
						});
					},
					cellDBLClickEvent({
						row,
						rowIndex,
						$rowIndex,
						column,
						columnIndex,
						$columnIndex,
						$event
					}) {
						if (columnIndex > 1) {
							this.editEvent(row);
						}
					},
					checkColumnMethod({
						column
					}) {
						if (['menuCode', 'menuName'].includes(column.property)) {
							return false
						}
						return true
					},
					//表头列排序
					tableSortChange(column, prop, order) {
						console.log(column + '---' + column.prop + '---' + column.order)
						this.order=column.order;
						this.prop=column.prop;
						this.findList();
					}
				}
			};
			vue = Vue.extend(main);
			vue = new vue().$mount('#app');
		}

		function parentSetMenuIcon(codeValue) {
			console.info(vue)
			vue.$data.formData.iconPath = codeValue;
		}
	</script>

</html>
